<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>08-动态修改dom元素的内容.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <h1>今天天气不错，我打算约下面的同学去旅游</h1>
    <h2>xxx</h2>
    <script>
      // 1 同学姓名 存在一个数组中
      let userNames = ['恒达', '祺星', '增年', '永芳'];
      // 随机的从以上的同学中 抽出一位
      // 把这位同学的名字 显示到 h2标签中即可

      // 2 获取一个随机数 范围 0 - 3
      // let index =Math.round(Math.random()*(3-0)+0)
      let index = Math.round(Math.random() * 3);
      console.log(userNames[index]);

      // 3 获取h2标签 dom元素
      let h2=document.querySelector("h2");

      // 4 设置 h2标签的文本
      h2.innerText=userNames[index];


    </script>
  </body>
</html>
